.base-module {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    border: 1px solid #000;
    background-color: #fff;
}

@mixin moduleBase($name) {
    .#{$name} {
        width: var(--#{$name}-width);
        height: var(--#{$name}-height);
        top: var(--#{$name}-y);
        left: var(--#{$name}-x);
    }
}

$list: (
    'con-signal',
    'sm',
    'decoder',
    'ir',
    'ram',
    'psw',
    'au',
    'multiplexer-3-1',
    'pc',
    'reg',
    'multiplexer-2-1',
    'input',
    'output'
);

@each $name in $list {
    @include moduleBase($name);
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: inherit;
}

.ram-items {
    display: block;
    justify-content: flex-start;
    align-self: flex-start;
    overflow-y: auto;
    content-visibility: auto;
}

// .data-item-val {
//     display: none;
// }

.ram-item {
    display: flex;
    width: 120px;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid #000;
    font-size: 10px;
    content-visibility: auto;

    &:last-child {
        border-bottom: none;
    }

    &-addr {
        width: 50%;
        flex-shrink: 0;
        border-right: 1px solid #000;
        padding: 0 2px;
    }

    &-val {
        padding: 0 2px;
        flex: 1;
    }
}

.ram-item.selected {
    background: #c2ebff;
}

.pc .content-2 {
    justify-content: center;
}

.data-item {
    display: flex;
    font-size: 10px;
}

.data-item-val {
    font-size: 10px;
}

.bus-container > .data-item-val {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: rgba($color: #fff, $alpha: 0.5);
    transform: translate(-50%, -50%);
}

.input .data-item {
    flex-direction: column;

    .data-item-val {
        align-self: center;
    }
}

.bool {
    cursor: pointer;
}

.bool[data-bool-val='0'] {
    color: #6c757d;

    [class$='-text']::after {
        content: '=0';
    }
}
.bool[data-bool-val='1'] {
    color: #0d6efd;

    [class$='-text']::after {
        content: '=1';
    }
}

.reg .content-2 {
    justify-content: flex-end;
}

.au_gf,
.sm_value {
    flex-direction: column;
    transform: translateY(50%);

    &-text {
        // 书写方向为竖着写
        writing-mode: vertical-rl;
    }
}

.ram-edit {
    textarea {
        margin-top: 16px;
        font-size: 16px;
        height: 300px;
    }
}

.pc-edit,
.reg-edit {
    .modal-body {
        padding: 24px;
    }

    input {
        font-size: 16px;
        padding: 8px 16px;
        width: 200px;
        margin: 8px;
    }
}

.content-2 {
    cursor: pointer;
}
